<template>
	<view class="Happy">
		<view class="topTitle">
			<Total title="吃喝玩乐"></Total>
		</view>

		<view class="top">
			<view class="topAddress">
				<!-- 	<text>地址</text>
				<uni-icons type="down" size="35rpx" color="white"></uni-icons> -->
				<Map></Map>
			</view>
			<view class="topLook" @click="getSearch">
				<uni-icons type="search" size="40rpx" color="white"></uni-icons>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="white"
			indicator-active-color="red" circular>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../../static/买车.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../../static/家电.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../../static/景色.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../../static/化妆品.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="item_box">
				<image class="swiper-item" src="../../../static/狂欢购.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 商品类型筛选 -->
		<view class="shopType">
			<view v-for="(ele, index) in shopType" :key="index" class="shopType_boxs" @click="getFind(ele.path)">
				<view :class="ele.className">
					<uni-icons :type="ele.img" size="40rpx" color="white"></uni-icons>
				</view>
				{{ele.name}}
			</view>
		</view>
		<HappyType :goodsList="goodsList" :options1="options1" :options2="options2" :options3="options3"
			@getFilterList="getFilterList" style="height: 100%;"></HappyType>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { get_shops_list } from "../../../api/api";
	import Total from "../Totle.vue";
	import HappyType from "./componte/HappyType.vue";
	import Map from './componte/Map.vue';

	//频道类型
	const shopType = ref<Array>([
		{
			name: "超市/便利店",
			img: "cart",
			className: "shopType_boxs1",
			path: "/pages/Find/Happy/Supermarket/Supermarket?type=杂货"
		},
		{
			name: "休闲娱乐",
			img: "shop-filled",
			className: "shopType_boxs2",
			path: "/pages/Find/Happy/Entertainment/Entertainment?type=娱乐"
		},
		{
			name: "美食",
			img: "map-filled",
			className: "shopType_boxs3",
			path: "/pages/Find/Happy/Food/Food?type=美食"
		},
		{
			name: "周边游",
			img: "paperplane-filled",
			className: "shopType_boxs1",
			path: "/pages/Find/Happy/Travel/Travel?type=旅游"
		},
		{
			name: "医疗美容",
			img: "medal-filled",
			className: "shopType_boxs1",
			path: "/pages/Find/Happy/Medicine/Medicine?type=医疗"
		},
		{
			name: "生活服务",
			img: "cart-filled",
			className: "shopType_boxs2",
			path: "/pages/Find/Happy/Life/Life?type=服务"
		},
		{
			name: "运动健身",
			img: "paperclip",
			className: "shopType_boxs3",
			path: "/pages/Find/Happy/Motion/Motion?type=健身"
		},
		{
			name: "亲子",
			img: "person-filled",
			className: "shopType_boxs1",
			path: "/pages/Find/Happy/Parenting/Parenting?type=亲子"
		}
	]);

	//数据跳转
	const getFind = (path : string) => {
		uni.navigateTo({
			url: path
		})
	}

	const value1 = ref("0-1KM")  //距离
	const value2 = ref("不限") //分类
	const value3 = ref("") //排序
	//轮播图
	const goodsList = ref<array>([]);
	const getGoodsList = async () => {
		const res : any = await get_shops_list({ distance: value1.value, type: value2.value, sort: value3.value })
		goodsList.value = res.data
	}

	onMounted(() => {
		onLoad();
	})

	//商铺筛选点
	const options1 = ref([
		{
			label: "附近",
			value: "0-1KM"
		},
		{
			label: "1-2KM",
			value: "1-2KM"
		},
		{
			label: "2-3KM",
			value: "2-3KM"
		},
		{
			label: "3-5KM",
			value: "3-5KM"
		},
		{
			label: "5KM以上",
			value: "5-9999999999KM以上"
		},
	]);

	const options2 = ref([
		{
			label: "不限",
			value: "不限"
		},
		{
			label: "杂货",
			value: "杂货"
		},
		{
			label: "娱乐",
			value: "娱乐"
		},
		{
			label: "美食",
			value: "美食"
		},
		{
			label: "旅游",
			value: "旅游"
		},
		{
			label: "医疗",
			value: "医疗"
		},
		{
			label: "服务",
			value: "服务"
		},
		{
			label: "健身",
			value: "健身"
		},
		{
			label: "亲子",
			value: "亲子"
		}
	]);

	const options3 = ref([
		{
			label: "智能排序",
			value: "智能排序"
		},
		{
			label: "热门排序",
			value: "热门排序"
		},
		{
			label: "销量排序",
			value: "销量排序"
		},
		{
			label: "价格排序",
			value: "价格排序"
		}
	])

	//获取到子组件的数据
	const getFilterList = (valueA, valueB, valueC) => {
		value1.value = valueA;
		value2.value = valueB;
		value3.value = valueC;
		getGoodsList();
	}

	//跳转入搜索页面
	const getSearch = () => {
		uni.navigateTo({
			url: "/pages/Find/Search/Search"
		})
	}
	// Web Worker
	const worker = ref(null);

	const onLoad = () => {
		// 检查当前环境是否支持Web Worker
		if (typeof worker !== "undefined") {
			try {
				// 正确的路径应该根据你的项目结构调整
				worker.value = new Worker("../../../static/web");
				worker.value.onmessage = handleMessage();

				// 向 Worker 发送消息以启动请求
				worker.value.postMessage({
					method: "GET",
					url: "/Find/index/aaa", // 替换为实际API端点
					body: null // 如果是GET请求，这里通常是null
				});
			} catch (error) {
				console.error("Failed to create worker:", error);
			}
		}
	};

	const handleMessage = (e) => {
		getGoodsList();
	};

	const onUnload = () => {
		// 清理 Worker
		if (worker.value) {
			worker.value.terminate();
			worker.value = null;
		}
	};
</script>


<style lang="scss" scoped>
	.Happy {
		color: white;
		width: 100vw;
		background-color: #282c34;
	}

	.top {
		width: 90%;
		margin-top: 6vh;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.4rem;
	}

	.topTitle {
		//置顶
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.topLook {
		width: 80%;
		padding: 0.36rem;
		border-radius: 30rpx;
		background-color: black;
	}

	.topAddress {
		display: flex;
		align-items: center;
		height: 2.8rem;
	}

	.item_box {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		border: 1px solid #282c34;
	}

	.shopType-box {
		width: 100%;
		height: 100%;
	}

	//商品类型筛选

	//频道类型
	.shopType {
		width: 100%;
		height: 15%;
		margin-top: 1rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
	}

	.shopType_boxs {
		width: 24%;
		height: 90%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-bottom: 1.2rem;
	}

	.shopType_boxs1 {
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #93c7fd;
	}

	.shopType_boxs2 {
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffbe77;
	}

	.shopType_boxs3 {
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ff5b81;
	}
</style>